<template>
  <div class="lyricsIndex page">
    <div class="filter">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="价格总类：">
          <el-radio-group v-model="radio">
            <el-radio :label="3">所有</el-radio>
            <el-radio :label="6">免费</el-radio>
            <el-radio :label="9">付费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label=" 歌词分类：">
          <el-checkbox-group v-model="chooseCreationType">
            <el-checkbox
              :label="item.id"
              v-for="(item, index) in ChooseCreationList"
              :key="index"
              >{{ item.creationTypeModel.creationTypeName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <Item v-for="(item, index) in 2" :key="index" :data="item"></Item>
    </div>
    <div style="text-align: center">
      <el-pagination
        background
        v-model:currentPage="currentPage1"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout=" prev, pager, next "
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { CreationTypeListByTypeId,ScriptWritingListByWhere } from "@/api/ScriptWriting";
import Item from "./item.vue";
export default {
  components: {
    Item,
  },
  data() {
    return {
      form: {},
      radio: "",
      chooseCreationType:[],
      ChooseCreationList:[],
      
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      CreationTypeListByTypeId({ typeId: 3 }).then((res) => {
        this.ChooseCreationList = res.data;
      });
      ScriptWritingListByWhere({creationTypeId:3}).then((res)=>{

      })
    },
    
  },
};
</script>
<style lang="scss" scoped>
.lyricsIndex {
  padding-bottom: 20px;
  .filter {
    background: #ffffff;
    box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
    border-radius: 4px;
    overflow: hidden;
    ::v-deep {
      .el-form-item {
        margin-bottom: 0;
        padding: 6px 0;
        border-bottom: 1px solid #e5e5e5;
      }
      .disflex {
        .el-form-item__content {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 20px;
          .more {
            cursor: pointer;
            color: #666666;
          }
          i {
            margin-left: 5px;
          }
        }
      }
    }
  }
  .list {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
  }
}
</style>